<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>取车城市</title>
	<link rel="stylesheet" href="<%=path %>/css/amazeui.min.css" />
	<link rel="stylesheet" href="<%=path %>/css/wgj_style.css" />
	<script type="text/javascript" src="<%=path %>/js/jquery.min.js"></script>
	<script type="text/javascript" src="<%=path %>/js/amazeui.min.js"></script>
	<script type="text/javascript">
		function getCity(cityName){
			window.location.href="<%=path%>/dept/queryDept?cityName="+cityName;
		}
	</script>
</head>

<body>
<section>
	<div class="quche mt30" style="border-bottom:1px solid #dedede;">
    	<div class="am-input-group am-input-group-lg">
          	<span class="am-input-group-label arrow_bg">当前定位城市</span>
          	<span class="am-form-field close_bg">${cityName}
          	</span>
          	
        </div>
    </div>
    <div class="am-panel-group" id="accordion">
      	<div class="am-panel">
            <div class="am-panel-hd">
              	<h4 class="am-panel-title" data-am-collapse="{parent:'#accordion',target:'#do-not-say-1'}">热门城市</h4>
            </div>
            <div id="do-not-say-1" class="am-panel-collapse am-collapse">
              	<ul class="am-panel-bd city_ul">
                	<li><a href="javascript:;" onclick="getCity('杭州市');">杭州市</a></li>
              	</ul>
            </div>
      	</div>
      	<div style="clear: both;"></div>
      	<div class="am-panel">
            <div class="am-panel-hd">
              	<h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-2'}">ABCDE</h4>
            </div>
            <div id="do-not-say-2" class="am-panel-collapse am-collapse">
              	<ul class="am-panel-bd city_ul">
              		<c:forEach items="${citylist }" var="city">
              			<c:if test="${city.c_pin<'F' }">
              				<li><a href="javascript:;" onclick="getCity('${city.c_name}');">${city.c_name }</a></li>
              			</c:if>
              		</c:forEach>
              	</ul>
            </div>
      	</div>
      	<div style="clear: both;"></div>
      	<div class="am-panel">
            <div class="am-panel-hd">
              <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-3'}">FGHIJK</h4>
            </div>
            <div id="do-not-say-3" class="am-panel-collapse am-collapse">
              	<ul class="am-panel-bd city_ul">
        		<c:forEach items="${citylist }" var="city">
       				<c:if test="${city.c_pin<'L' and city.c_pin>='F' }">
       					<li><a href="javascript:;" onclick="getCity('${city.c_name}');">${city.c_name }</a></li>
       				</c:if>
       			</c:forEach>
              	</ul>
            </div>
      	</div>
      	<div style="clear: both;"></div>
        <div class="am-panel">
            <div class="am-panel-hd">
              <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-4'}">LMNOP</h4>
            </div>
            <div id="do-not-say-4" class="am-panel-collapse am-collapse">
              	<ul class="am-panel-bd city_ul">
              		<c:forEach items="${citylist }" var="city">
       				<c:if test="${city.c_pin>='L' and city.c_pin<'Q' }">
       					<li><a href="javascript:;" onclick="getCity('${city.c_name}');">${city.c_name }</a></li>
       				</c:if>
       			</c:forEach>
              	</ul>
            </div>
      	</div>
      	<div style="clear: both;"></div>
        <div class="am-panel">
            <div class="am-panel-hd">
              <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-5'}">QRSTU</h4>
            </div>
            <div id="do-not-say-5" class="am-panel-collapse am-collapse">
              	<ul class="am-panel-bd city_ul">
              		<c:forEach items="${citylist }" var="city">
	       				<c:if test="${city.c_pin>='Q' and city.c_pin<'V' }">
	       					<li><a href="javascript:;" onclick="getCity('${city.c_name}');">${city.c_name }</a></li>
	       				</c:if>
	       			</c:forEach>
              	</ul>
            </div>
      	</div>
      	<div style="clear: both;"></div>
        <div class="am-panel">
            <div class="am-panel-hd">
              <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-6'}">VWXYZ</h4>
            </div>
            <div id="do-not-say-6" class="am-panel-collapse am-collapse">
              	<ul class="am-panel-bd city_ul">
              		<c:forEach items="${citylist }" var="city">
	       				<c:if test="${city.c_pin>='V'  }">
	       					<li><a href="javascript:;" onclick="getCity('${city.c_name}');">${city.c_name }</a></li>
	       				</c:if>
	       			</c:forEach>
              	</ul>
            </div>
      	</div>
    </div>
</section>
</body>
</html>

